<template>
  <div class="container">
    <div style="background-color: #2758bb">
      <nav-bar subTitle="企业画像">
      </nav-bar>
    </div>

    <div class="body">
      <el-card shadow="never">
        <el-form :model="form" label-width="auto" style="max-width: 1000px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="关键词">
                <el-input v-model="form.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标签">
                <el-select
                    v-model="form.label"
                    placeholder="请选择"
                >
                  <el-option
                      v-for="(item,index) in ['规模以下企业','数字经济','工业投资企业','8100产业','246产业']"
                      :key="index"
                      :label="item"
                      :value="index"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="属地政府" label-width="100">
                <el-select
                    v-model="form.dept"
                    placeholder="请选择"
                >
                  <el-option
                      v-for="(item,index) in ['万秀区','长洲区','龙圩区','苍梧县','藤县','蒙山县','岑溪市']"
                      :key="index"
                      :label="item"
                      :value="index"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="415产业集群" label-width="120">
                <el-select
                    v-model="form.group"
                    placeholder="请选择"
                >
                  <el-option
                      v-for="(item,index) in ['高端装备产业集群','绿色石化与新材衬产业集群','现代消费与健康产业集都跟','新一代信息技术产业集群']"
                      :key="index"
                      :label="item"
                      :value="index"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="年产总值">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox value="Online activities" name="type">
                    1000万以内
                  </el-checkbox>
                  <el-checkbox value="Promotion activities" name="type">
                    1000万-2000万
                  </el-checkbox>
                  <el-checkbox value="Offline activities" name="type">
                    2000万-5000万
                  </el-checkbox>
                  <el-checkbox value="Simple brand exposure" name="type">
                    5000万-1亿
                  </el-checkbox>
                  <el-checkbox value="Simple brand exposure" name="type">
                    1亿以上
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="企业荣誉">
                <el-checkbox-group v-model="form.honer">
                  <el-checkbox value="Online activities" name="type">
                    规上企业
                  </el-checkbox>
                  <el-checkbox value="Promotion activities" name="type">
                    上榜企业
                  </el-checkbox>
                  <el-checkbox value="Offline activities" name="type">
                    上云企业
                  </el-checkbox>
                  <el-checkbox value="Simple brand exposure" name="type">
                    上市企业
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="16" style="text-align: right;">
              <el-button>重置</el-button>
              <el-button type="primary">查询</el-button>
            </el-col>
          </el-row>

        </el-form>
      </el-card>
      <br>
      <el-card shadow="never">
        <div>符合条件的结果共有 <strong style="color:#0b63b7;">774条</strong> 记录</div>
        <ul class="co-list">
          <template v-for="(item,index) in corporateData">
            <li>
              <div style="cursor: pointer" @click="isOpen(index)"><strong>{{ item.companyName }}</strong>
                <el-tag type="success">{{ item.state }}</el-tag>
              </div>
              <div>
                <template v-for="(item2,index2) in item.labelDTOList">
                  <el-tag class="tag" :type="setType(index2)">{{ item2.name }}</el-tag>
                </template>
              </div>
              <div><small>法定代表人:</small> <strong>{{ item.legal }}</strong> <small>注册资本</small>
                <strong>{{ formatNumber(item.regMoney).value }}{{ formatNumber(item.regMoney).unit }}人民币</strong>
                <small>成立日期：</small>
                <strong>{{ item.upDate }}</strong> <small>属地政府:</small><strong>{{ item.deptName }}</strong> <small>企业地址：</small>
                <strong>{{ item.address }}</strong></div>
            </li>
          </template>
        </ul>
        <div style="margin-top: 20px;padding-bottom: 30px">
          <el-pagination style="float: right" background layout="prev, pager, next" :total="1000"/>
        </div>
      </el-card>
    </div>
  </div>
  <el-dialog
      v-model="open"
      :title="tableData.companyName"
      width="1200"
  >
    <div>
      <template v-for="(item2,index2) in tableData.labelDTOList">
        <el-tag class="tag" :type="setType(index2)">{{ item2.name }}</el-tag>
      </template>
    </div>
    <br>
    <div class="ro-list"><small>法定代表人:</small> <strong>{{ tableData.legal }}</strong> <small>注册资本</small>
      <strong>{{ formatNumber(tableData.regMoney).value }}{{ formatNumber(tableData.regMoney).unit }}人民币</strong>
      <small>成立日期：</small>
      <strong>{{ tableData.upDate }}</strong> <small>属地政府:</small><strong>{{ tableData.deptName }}</strong>
      <small>企业地址：</small>
      <strong>{{ tableData.address }}</strong></div>
    <br>
    <div style="height: 300px">
      <el-row :gutter="60">
        <el-col :span="16">
          企业介绍：
          服装、服饰、针纺织品、服装面辅料、防静电工作服、阻燃防护服、家具、木制品、文具、五金、工艺美术品的制造、加工、批发、零售；皮革后整理加工，皮制品制造、加工；服装、服饰设计；实业项目投资；自营和代理各类货物和技术的进出口，但国家限定经营或禁止进出口的货物和技术除外。（未经金融等监管部门批准不得从事吸收存款、融资担保、代客理财、向社会公众集（融）资等金融业务）（依法须经批准的项目，经相关部门批准后方可开展经营活动）
        </el-col>
        <el-col :span="8">
          <el-image style="width: 80%" :src="utils.getAssetsFile('map2.png')"></el-image>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="open = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script setup>
import NavBar from "@/components/navBar.vue";
import {corporateData} from './data/data.js'

import {reactive, ref} from 'vue'
import utils, {formatNumber} from "@/utils/index.js";

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})


const setType = (key) =>{
  switch (key){
    case 0:
      return 'success'
    case 1:
      return 'warning'
    case 2:
      return 'danger'
    case 3:
      return 'info'
    default:
      return 'primary'
  }
}

const open = ref(false)
const tableData = ref({})

const isOpen = (index) => {
  open.value = true
  tableData.value = corporateData[index]
}

</script>

<style scoped lang="scss">
.container {
  background-color: #ecf1f7;
}

.body {
  box-sizing: border-box;
  padding: 15px;
  background-color: #ecf1f7;
}

.co-list {
  margin-top: 20px;
  height: calc(45vh + 40px);
  overflow-y: scroll;
  font-size: 14px;

  > li {
    padding: 10px;
    border-bottom: 1px solid #bff2f5;

    strong {
      margin-right: 20px;
    }

    small {
      color: #666666;
    }

    > div:first-child {
      strong {
        font-size: 16px
      }
    }

    > div:nth-child(2) {
      padding: 15px 0;
    }
  }
}

.ro-list{
  strong,
  small{
    margin: 0 10px;
  }
}
.tag {
  margin-right: 10px;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: #8b8b8b;
}
</style>
